<template>
  <div class="container" v-if="book">
    <div class="head">
      <img class="image" :src="book.image">
      <span class="title">{{book.title}}</span>
      <span class="author">{{book.author}}</span>
    </div>
    <div class="sub-container">
      <span class="headline">短评</span>
      <span class="shadow" v-if="this.comments==false">还没有短评</span>
      <div class="comment-container">
        <div class="tags-item" v-for="(item, index) in this.comments" :key="index">
          <book-tag :class="tagClassName(index)" :text="item.content">
            <span class="num">{{'+'+item.nums}}</span>
          </book-tag>
        </div>
      </div>
    </div>
    <div class="sub-container">
      <span class="headline">内容简介</span>
      <span class="content">{{book.summary}}</span>
    </div>
    <div class="sub-container">
      <span class="headline">书本信息</span>
      <div class="detail-container">
        <div class="vertical description">
          <span>出版社</span>
          <span>出本年</span>
          <span>页数</span>
          <span>定价</span>
          <span>装帧</span>
        </div>
        <div class="vertical">
          <span>{{book.publisher}}</span>
          <span>{{book.pubdate}}</span>
          <span>{{book.pages}}</span>
          <span>{{book.price}}</span>
          <span>{{book.binding}}</span>
        </div>
      </div>
    </div>
    <div class="post-container" v-if="!this.posting">
      <div class="post-fake" @click="onFakePost">
        <span>输入短评</span>
      </div>
      <div class="like-container">
        <like :likeCount="likeCount" :likeStatus="likeStatus" class="like" @like="onLike"/>
      </div>
    </div>
    <div class="posting-container" v-if="this.posting">
      <div class="post-header">
        <span v-if="!(this.comments==false)">仅可点击标签+1</span>
        <span v-else>暂无短评</span>
        <span class="cancel" @click="onCancel">取消</span>
      </div>
      <div class="comment-container">
        <div class="tags-item" v-for="(item, index) in commentList(this.comments, 3)" :key="index">
          <book-tag :class="tagClassName(index)" :text="item.content" @tapping="onPost">
            <span class="num">{{'+'+item.nums}}</span>
          </book-tag>
        </div>
      </div>
      <input class="post" placeholder="短评最多12个字" @keyup.enter="onPost">
    </div>
  </div>
</template>

<script>
import {BookModel} from '../../models/book'
import {LikeModel} from '../../models/like'
import {Indicator, Toast} from 'mint-ui'
import Like from 'components/like/like'
import BookTag from 'components/bookTag/BookTag'
const bookModel = new BookModel()
const likeModel = new LikeModel()
export default {
  name: 'BookDetail',
  components: {
    Like,
    BookTag
  },
  data () {
    return {
      bookId: null,
      comments: [],
      comment: null,
      book: null,
      likeStatus: false,
      likeCount: 0,
      posting: false
    }
  },
  methods: {
    onLike (behavior) {
      likeModel.like(behavior, this.bookId, 400)
        .then(res => {
          let tip = behavior === 'like' ? '点赞成功' : '取消成功'
          if (res.msg === 'ok') {
            Toast({
              message: tip,
              duration: 1000
            })
            this.likeStatus = behavior === 'like'
          }
        })
    },
    onFakePost () {
      this.posting = true
    },
    onCancel () {
      this.posting = false
    },
    onPost (e) {
      this.comment = typeof e === 'string' ? e : e.target.value
      if (!this.comment) {
        return
      }
      if (this.comment.length > 12) {
        Toast({
          message: '短评最多12个字',
          duration: 1000
        })
        return
      }
      bookModel.postComment(this.bookId, this.comment)
        .then(res => {
          Toast({
            message: '+1',
            duration: 1000
          })
          this.comments.unshift({
            content: this.comment,
            nums: 1
          })
          this.posting = false
        })
    },
    $_getBookDeatil (bid) {
      Indicator.open({
        spinnerType: 'double-bounce'
      })
      const detail = bookModel.getDetail(bid)
      const comments = bookModel.getComments(bid)
      const likeStatus = bookModel.getLikeStatus(bid)
      Promise.all([detail, comments, likeStatus])
        .then(res => {
          this.book = res[0]
          this.comments = res[1].comments
          this.likeStatus = !!res[2].like_status
          this.likeCount = res[2].fav_nums
          Indicator.close()
        })
    }
  },
  computed: {
    commentList () {
      return (data, index) => {
        return data.slice(0, index)
      }
    },
    tagClassName () {
      return (id) => {
        return `tag-${id}`
      }
    }
  },
  watch: {
    $route (to, from) {
      if (to.name === 'BookDetail') {
        this.bookId = to.query.bookId
        this.$_getBookDeatil(this.bookId)
      }
    }
  },
  created () {
    this.bookId = this.$route.query.bookId
    this.$_getBookDeatil(this.bookId)
  }
}
</script>

<style lang="stylus" scoped>
  @import "~style/book-tags.styl"
  .container
    width: 100%
    margin-top: 1.16rem
    background-color: #f5f5f5
    .head
      background-color: #fff
      padding-top: .4rem
      padding-bottom: .4rem
      display: flex
      flex-direction: column
      align-items: center
      .image
        width: 2rem
        height: 3rem
        box-shadow: 2px 2px 3px #e3e3e3
      .title
        color: #2f2f2f
        margin-top: .2rem
        font-size: .38rem
        font-weight: 600
      .author
        font-size: .28rem
        color: #999
    .sub-container
      width: 6.9rem
      display: flex
      flex-direction: column
      align-items: center
      margin-top: .3rem
      background-color: #fff
      padding: .3rem
      .headline
        font-size: .3rem
        font-weight: 600
        color: #2f2f2f
        margin-bottom: .2rem
      .comment-container
        comment-container()
      .content
        text-indent: .5rem
        font-weight: 500
        line-height: .35rem
      .detail-container
        width: 100%
        display: flex
        flex-direction: row
        justify-content: flex-start
        margin-bottom: 1rem
        font-size: .28rem
        color: #666
      .vertical
        display: flex
        flex-direction: column
        span
          margin-bottom: .05rem
      .description
        color: #999
        margin-right: .3rem
    .post-container
      height: 1rem
      box-shadow: 1px -1px 1px #e3e3e3
      position: fixed
      width: 6.9rem
      background-color: #fff
      bottom: 0
      display: flex
      flex-direction: row
      align-items: center
      padding: 0 .3rem
      justify-content: space-between
      z-index: 100
      .post-fake
        display: flex
        flex-direction: row
        align-items: center
        height: .6rem
        width: 4.6rem
        border: 1px solid #999
        border-radius: .3rem
        font-size: .22rem
        padding-left: .2rem
    .posting-container
      bottom: 0
      position: fixed
      display: flex
      flex-direction: column
      align-items: center
      background-color: #fff
      width: 100%
      z-index: 999
      .post-header
        width: 100%
        border-bottom: 1px solid #f5f5f5
        border-top: 1px solid #f5f5f5
        height: 100rpx
        display: flex
        flex-direction: row
        align-items: center
        justify-content: space-between
        span
          padding: .25rem
          &:first-child
            font-size: .28rem
            color: #bbb
        .cancel
          color: #666
      .comment-container
        width: 6.9rem
        padding: .1rem .3rem 0 .3rem
        comment-container()
      .post
        width: 6.9rem
        margin: .3rem auto
        height: .56rem
        background-color: #f5f5f5
        border-radius: .3rem
        padding-left: .25rem
</style>
